<template>
  <!-- 内容主体开始 -->
  <div class="content">
    <!-- 开头“矿买买”部分开始 -->
    <div class="headCon">
      <!-- “矿买买文字/按钮部分开始” -->
      <div class="headTextBtn">
        <!-- 文字部分开始 -->
        <div class="headText">
          <span class="headText_1">矿买买</span>
          <span class="headText_2">我么是专业的矿产品交易平台</span>
        </div>
        <!-- 文字部分结束 -->

        <!-- 按钮部分开始 -->
        <div class="headBtn">
          <button>
            <img src="../assets/sho/矩形 12.png" alt />
            <span>安卓下载</span>
          </button>
          <div style="width:100%; height: 30px"></div>
          <button>
            <img src="../assets/sho/矩形 1 拷贝 8.png" alt />
            <span>苹果下载</span>
          </button>
        </div>
        <!-- 按钮部分结束 -->
      </div>
      <!-- “矿买买文字/按钮部分结束” -->

      <!-- “矿买买”图片部分开始 -->
      <div class="headImg">
        <el-carousel indicator-position="none" height="400px">
          <el-carousel-item v-for="item in 4" :key="item">
            <img src="..\assets\sho\组 4.png" alt="">
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- “矿买买”图片部分结束 -->
    </div>
    <!-- 开头“矿买买”部分结束 -->

    <!-- 专业的矿产品交易平台部分开始 -->
    <div class="conTransaction">
      <!-- 半圆小图片开始 -->
      <img src="../assets/sho/组 257.png" alt class="Img_257" />
      <!-- 半圆小图片结束 -->

      <!-- 红点小图片开始 -->
      <img src="../assets/sho/椭圆 6 拷贝.png" alt class="Img_6" />
      <!-- 红点小图片结束 -->

      <!-- 文字区域开始 -->
      <div class="conTransactionText">
        <div class="text_1">专业的矿产品交易平台</div>
        <div
          class="text_2"
        >公司特与世纪联华超市有限公司、物美商业集团股份有限公司、天天好大药房等合作，在浙江省多个城市100多家门店进行销售。此外公司还搭档杭州电视台生省多个城市</div>
        <el-button type="info" round>查看更多</el-button>
      </div>
      <!-- 文字区域结束 -->

      <!-- 图片区域开始 -->
      <div class="conTransactionImg">
        <img src="../assets/sho/组 4.png" alt />
      </div>
      <!-- 图片区域结束 -->
    </div>
    <!-- 专业的矿产品交易平台部分结束 -->

    <!-- 定制性平台功能开始 -->
    <div class="conCustomized">
      <!-- 红色倾斜方块部分开始 -->
      <div class="redBlock"></div>
      <!-- 红色倾斜方块部分结束 -->

      <!-- 红色半圆右边部分开始 -->
      <img src="../assets/sho/椭圆 7 拷贝.png" class="conCustomizedImg" />
      <!-- 红色半圆右边部分结束 -->

      <!-- 图片部分开始 -->
      <div class="conCustomizedImg">
        <el-carousel :interval="4000" type="card" height="300px">
          <el-carousel-item>
            <img src="../assets/sho/组 245 拷贝 2.png" alt />
          </el-carousel-item>
          <el-carousel-item>
            <img src="../assets/sho/组 245 拷贝.png" alt />
          </el-carousel-item>
          <el-carousel-item>
            <img src="../assets/sho/组 245.png" alt />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 图片部分结束 -->

      <!-- 文字部分开始 -->
      <div class="conCustomizedText">
        <span>定制性平台功能</span>
        <div>
          <img src="../assets/sho/矩形 2326 拷贝.png" alt />
          <span>普通商品</span>
        </div>
        <div>
          <img src="../assets/sho/圆角矩形 1.png" alt />
          <span>团购商品</span>
        </div>
        <div>
          <img src="../assets/sho/拍卖 (1) 拷贝.png" alt />
          <span>拍卖商品</span>
        </div>
        <div>
          <img src="../assets/sho/圆角矩形 3.png" alt />
          <span>发货功能</span>
        </div>
        <div>
          <img src="../assets/sho/圆角矩形 1-1.png" alt />
          <span>求购功能</span>
        </div>
      </div>
      <!-- 文字部分结束 -->
    </div>
    <!-- 定制性平台功能结束 -->

    <!-- 矿铲铲平台能够为您提供的服务区域开始 -->
    <div class="conService">
      <!-- 左边小半圆开始 -->
      <img src="../assets/sho/椭圆 7.png" alt class="conServiceImg_1" />
      <!-- 左边小半圆结束 -->

      <!-- 右边多边形开始 -->
      <img src="../assets/sho/多边形 2.png" alt class="conServiceImg_2" />
      <!-- 右边多边形结束 -->

      <!-- 左边小点开始 -->
      <img src="../assets/sho/椭圆 6 拷贝.png" alt class="conServiceImg_3" />
      <!-- 左边小点结束 -->

      <!-- 题目区域开始 -->
      <div class="conSubject">矿产产平台能够为您提供的服务</div>
      <!-- 题目区域结束 -->

      <!-- 服务介绍内容部分开始 -->
      <div class="serviceContent">
        <div>
          <!-- 图片/题目/简介部分开始 -->
          <div class="serviceIT">
            <img src="../assets/sho/矩形 230.png" alt />
            <span>高效</span>
            <p>简介简介简介简介简介简介简介简介简介</p>
          </div>
          <!-- 图片/题目/简介部分结束 -->

          <!-- 红色分割线部分开始 -->
          <span class="division"></span>
          <!-- 红色分割线部分结束 -->

          <div class="serviceIT">
            <img src="../assets/sho/矩形 232 拷贝.png" alt />
            <span>专业</span>
            <p>简介简介简介简介简介简介简介简介简介</p>
          </div>
          <!-- 图片/题目/简介部分结束 -->

          <!-- 红色分割线部分开始 -->
          <span class="division"></span>
          <!-- 红色分割线部分结束 -->

          <div class="serviceIT">
            <img src="../assets/sho/矩形 232 拷贝 2.png" alt />
            <span>活动</span>
            <p>简介简介简介简介简介简介简介简介简介</p>
          </div>
          <!-- 图片/题目/简介部分结束 -->
        </div>

        <div>
          <!-- 图片/题目/简介部分开始 -->
          <div class="serviceIT">
            <img src="../assets/sho/矩形 232 拷贝 3.png" alt />
            <span>便捷</span>
            <p>简介简介简介简介简介简介简介简介简介</p>
          </div>
          <!-- 图片/题目/简介部分结束 -->

          <!-- 红色分割线部分开始 -->
          <span class="division"></span>
          <!-- 红色分割线部分结束 -->

          <div class="serviceIT">
            <img src="../assets/sho/矩形 232.png" alt />
            <span>安全</span>
            <p>简介简介简介简介简介简介简介简介简介</p>
          </div>
          <!-- 图片/题目/简介部分结束 -->

          <!-- 红色分割线部分开始 -->
          <span class="division"></span>
          <!-- 红色分割线部分结束 -->

          <div class="serviceIT">
            <img src="../assets/sho/矩形 2321.png" alt />
            <span>真实</span>
            <p>简介简介简介简介简介简介简介简介简介</p>
          </div>
          <!-- 图片/题目/简介部分结束 -->
        </div>
      </div>
      <!-- 服务介绍内容部分结束 -->
    </div>
    <!-- 矿铲铲平台能够为您提供的服务区域结束 -->

    <!-- 企业商务合作部分开始 -->
    <div class="cooperationCon">
      <!-- 开头标题部分开始 -->
      <span>1000+企业与我们商务合作</span>
      <!-- 开头标题部分结束 -->

      <!-- 左边半圆区域开始 -->
      <img src="../assets/sho/椭圆 7.png" alt class="cooperationCon_1" />
      <!-- 左边半圆区域结束 -->

      <!-- 右边半圆区域开始 -->
      <img src="../assets/sho/椭圆 7 拷贝.png" alt class="cooperationCon_2" />
      <!-- 右边半圆区域结束 -->

      <!-- 内容区域开始 -->
      <div class="contentCoo">
        <!-- 小红块区域开始 -->
        <div class="redBlock redBlock_1">中国银行</div>
        <div class="redBlock redBlock_2">工商银行</div>
        <div class="redBlock redBlock_3">建设银行</div>
        <div class="redBlock redBlock_4">支付宝</div>
        <div class="redBlock redBlock_5">兴大银行</div>
        <div class="redBlock redBlock_6">农业银行</div>
        <div class="redBlock redBlock_7">微信</div>
        <div class="redBlock redBlock_8">招商银行</div>
        <div class="redBlock redBlock_9">交通银行</div>
        <!-- 小红块区域结束 -->
      </div>
      <!-- 内容区域结束 -->
    </div>
    <!-- 企业商务合作部分结束 -->

    <!-- 了解行业动态部分开始 -->
    <div class="dynamicCon">
      <!-- 标题部分开始 -->
      <span>及时了解最新行业动态</span>
      <!-- 标题部分结束 -->

      <!-- 内容部分开始 -->
      <div class="dynContent">
        <img src="../assets/sho/组 202.png" alt width="300" height="250" />
        <div>
          <el-carousel indicator-position="outside" height="200px">
            <el-carousel-item v-for="item in 3" :key="item">
              <div class="text_1">矿产业的一次重大改变，不知道的赶快了解...</div>
              <p>严格矿产利用排查监管。建立国土资、林业、安监、环保等部门联合排查监管机制，每月第一次深入矿山企业一线，加强对矿产开采情况的监督检查。对超层越界开</p>
              <el-button type="info" round>查看更多</el-button>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
      <!-- 内容部分结束 -->
    </div>
    <!-- 了解行业动态部分结束 -->
  </div>
  <!-- 内容主体结束 -->
</template>

<style scoped lang="less">
// 内容主体开始
.content {
  // 开头“矿买买”部分开始
  .headCon {
    width: 100%;
    height: 700px;
    background-image: url("../assets/sho/组-234.jpg");
    background-position: center;
    background-size: 100% 100%;
    position: relative;

    // “矿买买”文字/按钮部分开始
    .headTextBtn {
      width: 300px;
      height: 450px;
      position: absolute;
      top: 50%;
      left: 15%;
      transform: translate(0, -50%);
      // background-color: red;
      color: white;

      & > div {
        width: 100%;
        height: 50%;
      }

      // 文字部分开始
      .headText {
        // background-color: rosybrown;
        display: flex;
        flex-direction: column;

        .headText_1 {
          font-size: 55px;
          font-weight: 700;
          letter-spacing: 8px;
          padding-bottom: 20px;
        }

        .headText_2 {
          font-size: 16px;
          letter-spacing: 1.5px;
        }
      }
      // 文字部分结束

      // 按钮部分开始
      .headBtn {
        // background-color: yellowgreen;

        button {
          margin-left: 5px;
          width: 260px;
          height: 70px;
          border-radius: 30px;
          border: none;
          outline: none;
          transition: 0.5s all;
          color: white;
          font-size: 15px;
          display: flex;
          justify-content: center;
          align-items: center;
          transition: 0.5s all;
          background-color: #ed4b5a;

          &:hover {
            opacity: 0.8;
          }

          span {
            margin-left: 10px;
          }
        }

        button:nth-child(3) {
          background-color: #0a8df7;
        }
      }
      // 按钮部分结束
    }
    // “矿买买”文字/按钮部分结束

    // “矿买买”图片部分开始
    .headImg {
      width: 500px;
      height: 400px;
      background-color: white;
      box-shadow: 2px 5px 20px rgb(95, 93, 93);
      position: absolute;
      top: 50%;
      right: 10%;
      transform: translate(0, -50%);
      border-radius: 10px;
      overflow: hidden;
    }
    // “矿买买”图片部分结束
  }
  // 开头“矿买买”部分结束

  // 专业的矿产品交易平台部分开始
  .conTransaction {
    width: 80%;
    height: 450px;
    position: relative;
    left: 10%;
    // background-color: red;
    margin-bottom: 200px;

    // 半圆小图片开始
    .Img_257 {
      position: absolute;
      top: 65%;
      left: 0;
    }
    // 半圆小图片结束

    // 红点小图片开始
    .Img_6 {
      position: absolute;
      top: 0;
      right: 0;
    }
    // 红点小图片结束

    & > div {
      width: 35%;
      height: 80%;
      position: absolute;
    }

    // 文字区域开始
    .conTransactionText {
      // background-color: aqua;
      top: 10%;
      left: 15%;
      width: 25%;

      .text_1 {
        font-size: 27px;
        letter-spacing: 5px;
        margin-top: 20px;
        margin-bottom: 20px;
      }

      .text_2 {
        font-size: 14px;
        letter-spacing: 2px;
        line-height: 30px;
      }

      .el-button {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 130px;
        height: 50px;
        color: white;
        background-color: black;
      }
    }
    // 文字区域结束

    // 图片区域开始
    .conTransactionImg {
      background-color: rgb(173, 175, 45);
      top: 10%;
      right: 15%;
      border-radius: 30px;
    }
    // 图片区域结束
  }
  // 专业的矿产品交易平台部分结束

  // 定制性平台功能开始
  .conCustomized {
    width: 80%;
    height: 700px;
    position: relative;
    left: 10%;
    overflow: hidden;

    // 红色倾斜方块部分开始
    .redBlock {
      width: 710px;
      height: 550px;
      border-radius: 50px;
      position: absolute;
      top: 80px;
      left: -130px;
      background-color: #e63a4a;
      transform: rotate(-15deg);
    }
    // 红色倾斜方块部分结束
    // 红色半圆左边部分结束

    // 红色半圆右边部分开始
    .conCustomizedImg {
      position: absolute;
      top: 0;
      right: 0;
    }
    // 红色半圆右边部分结束

    // 图片部分开始
    .conCustomizedImg {
      width: 40%;
      height: 59%;
      border-radius: 25px;
      background-color: white;
      position: absolute;
      top: 10%;
      left: 21%;
      box-shadow: 10px 10px 25px #8f8b8b;

      .el-carousel {
        margin-top: 30px;
      }
    }
    // 图片部分结束

    // 文字部分开始
    .conCustomizedText {
      width: 30%;
      height: 65%;
      position: absolute;
      top: 10%;
      right: 5%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      letter-spacing: 3px;

      & > span {
        font-size: 30px;
        font-weight: 700;
      }

      & > div {
        display: flex;
        justify-content: space-around;
        align-items: center;

        span {
          margin-left: 10px;
        }
      }
    }
    // 文字部分结束
  }
  // 定制性平台功能结束

  // 矿铲铲平台能够为您提供的服务区域开始
  .conService {
    width: 80%;
    height: 600px;
    margin-top: 20px;
    position: relative;
    left: 10%;

    // 左边小半圆开始
    .conServiceImg_1 {
      position: absolute;
      top: 30px;
      left: 0;
    }
    // 左边小半圆结束

    // 右边多边形开始
    .conServiceImg_2 {
      position: absolute;
      top: 50%;
      right: 100px;
      transform: translate(0, -50%);
    }
    // 右边多边形结束

    // 左边小点开始
    .conServiceImg_3 {
      position: absolute;
      top: 60%;
      right: 50px;
    }
    // 左边小点结束

    // 题目区域开始
    .conSubject {
      width: 100%;
      height: 50px;
      letter-spacing: 4px;
      font-size: 35px;
      position: absolute;
      top: 0;
      left: 0;
      line-height: 50px;
      text-align: center;
    }
    // 题目区域结束

    // 服务介绍内容部分开始
    .serviceContent {
      width: 60%;
      height: 70%;
      position: absolute;
      top: 15%;
      left: 20%;

      div {
        width: 100%;
        height: 40%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 30px;

        // 图片/题目/简介部分开始
        .serviceIT {
          width: 32%;
          height: 100%;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          align-items: center;

          span {
            margin-bottom: -30px;
            font-size: 17px;
            font-weight: 700;
          }

          p {
            font-size: 13px;
            color: gray;
          }
        }
        // 图片/题目/简介部分结束

        // 红色分割线部分开始
        .division {
          display: block;
          width: 1px;
          height: 50px;
          background-color: #f8c9cc;
        }
        // 红色分割线部分结束
      }
    }
    // 服务介绍内容部分结束
  }
  // 矿铲铲平台能够为您提供的服务区域结束

  // 企业商务合作部分开始
  .cooperationCon {
    width: 80%;
    height: 600px;
    position: relative;
    left: 10%;
    overflow: hidden;
    // background-color: red;

    // 开头标题部分开始
    span {
      width: 100%;
      height: 50px;
      letter-spacing: 4px;
      font-size: 35px;
      position: absolute;
      top: 0;
      left: 0;
      line-height: 50px;
      text-align: center;
    }
    // 开头标题部分结束

    // 左边半圆区域开始
    .cooperationCon_1 {
      position: absolute;
      top: 50px;
      left: 0;
    }
    // 左边半圆区域结束

    // 右边半圆区域开始
    .cooperationCon_2 {
      position: absolute;
      top: 50%;
      right: 0;
    }
    // 右边半圆区域结束

    // 内容区域开始
    .contentCoo {
      width: 60%;
      height: 80%;
      // background-color: red;
      position: absolute;
      top: 15%;
      left: 20%;

      // 小红块区域开始
      .redBlock {
        background-color: #e63a4a;
        border-radius: 10px;
        text-align: center;
        color: white;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 2px;
        position: absolute;
      }

      .redBlock_1 {
        width: 80px;
        height: 50px;
        font-size: 10px;
        line-height: 50px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }

      .redBlock_2 {
        width: 180px;
        height: 80px;
        line-height: 80px;
        top: 20%;
        left: 15%;
      }

      .redBlock_3 {
        width: 200px;
        height: 100px;
        line-height: 100px;
        top: 22%;
        right: 13%;
      }

      .redBlock_4 {
        width: 120px;
        height: 70px;
        line-height: 70px;
        top: 60%;
        left: 20%;
      }

      .redBlock_5 {
        width: 80px;
        height: 50px;
        font-size: 10px;
        line-height: 50px;
        top: 65%;
        right: 20%;
      }

      .redBlock_6 {
        width: 180px;
        height: 80px;
        line-height: 80px;
        top: 70%;
        right: 25%;
        z-index: -1;
        background-color: #f5afb7;
      }

      .redBlock_7 {
        width: 250px;
        height: 130px;
        line-height: 130px;
        font-size: 30px;
        top: 40%;
        left: 25%;
        z-index: -1;
        background-color: #f5afb7;
      }

      .redBlock_8 {
        width: 150px;
        height: 70px;
        line-height: 70px;
        top: 30%;
        left: 0%;
        z-index: -1;
        background-color: #f5afb7;
      }

      .redBlock_9 {
        width: 150px;
        height: 70px;
        line-height: 70px;
        top: 2%;
        left: 40%;
        z-index: -1;
        background-color: #f5afb7;
      }
      // 小红块区域结束
    }
    // 内容区域结束
  }
  // 企业商务合作部分结束

  // 了解行业动态部分开始
  .dynamicCon {
    width: 80%;
    height: 500px;
    position: relative;
    left: 10%;
    overflow: hidden;
    background-color: #f4f4f4;

    // 标题部分开始
    span {
      width: 100%;
      height: 50px;
      margin-top: 30px;
      letter-spacing: 4px;
      font-size: 35px;
      position: absolute;
      top: 0;
      left: 0;
      line-height: 50px;
      text-align: center;
    }
    // 标题部分结束

    // 内容部分开始
    .dynContent {
      width: 60%;
      height: 60%;
      background-color: white;
      position: absolute;
      top: 25%;
      left: 20%;

      img {
        position: absolute;
        top: 50%;
        left: 20px;
        transform: translate(0, -50%);
      }

      & > div {
        width: 40%;
        height: 80%;
        position: absolute;
        top: 55%;
        right: 10%;
        transform: translate(0, -50%);

        .el-carousel {
          .el-carousel__container {
            background-color: red;
            .text_1 {
              font-size: 18px;
              font-weight: 700;
            }

            p {
              font-size: 11px;
              color: #acacac;
              padding-top: 20px;
              margin-top: 5%;
              border-top: 1px solid #acacac;
            }

            .el-button {
              position: absolute;
              bottom: 0;
              right: 5px;
              background-color: #000;
            }
          }
        }
      }
    }
    // 内容部分结束
  }
  // 了解行业动态部分结束
}
// 内容主体结束
</style>

<script>
export default {
  data() {
    return {
      bbb: "123123123",
    };
  },
  methods: {
    aaa() {
      this.$router.push("./uuu");
    },
  },
};
</script>